<pre>
<span class="pl-en">$</span>(<span class="pl-c1">document</span>).<span class="pl-en">ready</span>(<span class="pl-k">function</span>() {
    <span class="pl-k">var</span> header_array <span class="pl-k">=</span> [];

    <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>#wrapper<span class="pl-pds">'</span></span>).<span class="pl-en">fullpage</span>({
        <span class="pl-c">// navigation</span>
        anchors<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>page1<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>page2<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>page3<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>page4<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>page5<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>page6<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>page7<span class="pl-pds">'</span></span>],
        navigation<span class="pl-k">:</span> <span class="pl-c1">true</span>,

        <span class="pl-c">// design</span>
        sectionsColor<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>#ccc<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>#ccc<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>#ccc<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>#ccc<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>#fff<span class="pl-pds">'</span></span>],

        <span class="pl-en">afterRender</span><span class="pl-k">:</span> <span class="pl-k">function</span>() {
            <span class="pl-k">var</span> $_this <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-v">this</span>);

            <span class="pl-c">/* save values from every header */</span>
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>header h4<span class="pl-pds">'</span></span>).<span class="pl-en">each</span>(<span class="pl-k">function</span> (<span class="pl-smi">index</span>) {
                <span class="pl-k">var</span> $_this <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-v">this</span>);

                header_array[index <span class="pl-k">+</span> <span class="pl-c1">2</span>] <span class="pl-k">=</span> <span class="pl-smi">$_this</span>.<span class="pl-en">html</span>();
                <span class="pl-smi">$_this</span>.<span class="pl-en">html</span>(<span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>);
            });

            <span class="pl-c">/* --- initialize the state of each page --- */</span>
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.title<span class="pl-pds">'</span></span>).<span class="pl-en">hide</span>();
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.section3 .lang &gt; div<span class="pl-pds">'</span></span>).<span class="pl-en">hide</span>();
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.section4 #canvas<span class="pl-pds">'</span></span>).<span class="pl-c1">next</span>().<span class="pl-en">hide</span>();
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.section5 .content<span class="pl-pds">'</span></span>).<span class="pl-en">hide</span>();
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.section6 .content<span class="pl-pds">'</span></span>).<span class="pl-en">hide</span>();
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.section7 .content<span class="pl-pds">'</span></span>).<span class="pl-en">hide</span>();

            <span class="pl-c">/* --- 获取屏幕宽高设置给canvas --- */</span>
            <span class="pl-k">var</span> winWidth <span class="pl-k">=</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span>,
                _canvas  <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">getElementById</span>(<span class="pl-s"><span class="pl-pds">'</span>canvas<span class="pl-pds">'</span></span>);

            <span class="pl-smi">_canvas</span>.<span class="pl-c1">width</span> <span class="pl-k">=</span> (<span class="pl-k">function</span>(){
                <span class="pl-k">if</span>(winWidth <span class="pl-k">&gt;=</span> <span class="pl-c1">850</span>){
                    <span class="pl-k">return</span> <span class="pl-c1">500</span>;
                } <span class="pl-k">else</span> <span class="pl-k">if</span>(winWidth <span class="pl-k">&gt;</span> <span class="pl-c1">400</span>) {
                    <span class="pl-k">return</span> winWidth <span class="pl-k">*</span> <span class="pl-c1">0.85</span>;
                } <span class="pl-k">else</span> {
                    <span class="pl-k">return</span> winWidth <span class="pl-k">*</span> <span class="pl-c1">0.75</span>;
                }
            })();
        },

        <span class="pl-en">afterLoad</span><span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">anchorLink</span>, <span class="pl-smi">index</span>) {
            <span class="pl-k">var</span> $_this <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-v">this</span>);

            <span class="pl-c">// show the title and the header</span>
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>header h4<span class="pl-pds">'</span></span>).<span class="pl-en">typewriter</span>(header_array[index], <span class="pl-c1">70</span>, <span class="pl-k">function</span>() {
                <span class="pl-k">var</span> $_this <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-v">this</span>);

                <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.title<span class="pl-pds">'</span></span>).<span class="pl-en">fadeIn</span>(<span class="pl-c1">600</span>, <span class="pl-k">function</span>() {
                    <span class="pl-k">if</span>(index <span class="pl-k">==</span> <span class="pl-c1">3</span>)
                        <span class="pl-en">$</span>(<span class="pl-v">this</span>).<span class="pl-c1">next</span>().<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>div.lang &gt; div<span class="pl-pds">'</span></span>).<span class="pl-en">fadeIn</span>(<span class="pl-c1">1000</span>);
                });

                <span class="pl-k">if</span>(index <span class="pl-k">==</span> <span class="pl-c1">4</span>) {
                    <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>canvas<span class="pl-pds">'</span></span>).<span class="pl-en">fadeIn</span>(<span class="pl-c1">300</span>);
                    <span class="pl-c1">window</span>.<span class="pl-en">play</span>(<span class="pl-k">function</span>(){
                        <span class="pl-en">$</span>(<span class="pl-v">this</span>).<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>canvas<span class="pl-pds">'</span></span>).<span class="pl-c1">next</span>().<span class="pl-en">fadeIn</span>(<span class="pl-c1">600</span>);
                    }.<span class="pl-en">bind</span>(<span class="pl-v">this</span>));
                }

                <span class="pl-k">if</span>( index <span class="pl-k">==</span> <span class="pl-c1">6</span> <span class="pl-k">||</span> index <span class="pl-k">==</span> <span class="pl-c1">7</span>) {
                    <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.content<span class="pl-pds">'</span></span>).<span class="pl-en">fadeIn</span>(<span class="pl-c1">500</span>);
                }
            }.<span class="pl-en">bind</span>(<span class="pl-v">this</span>));

            <span class="pl-k">if</span>(index <span class="pl-k">==</span> <span class="pl-c1">5</span>) {
                <span class="pl-k">var</span> $_table <span class="pl-k">=</span> <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.chess &gt; table<span class="pl-pds">'</span></span>),
                    $_td <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>&lt;td /&gt;<span class="pl-pds">'</span></span>),
                    $_tr <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>&lt;tr /&gt;<span class="pl-pds">'</span></span>);

                <span class="pl-k">if</span>( <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>td<span class="pl-pds">'</span></span>).<span class="pl-c1">length</span> <span class="pl-k">===</span> <span class="pl-c1">0</span> ){
                    <span class="pl-k">for</span>(<span class="pl-k">var</span> i <span class="pl-k">=</span> <span class="pl-c1">0</span>; i <span class="pl-k">&lt;</span> <span class="pl-c1">10</span>; i<span class="pl-k">++</span>) {
                        <span class="pl-smi">$_tr</span>.<span class="pl-en">append</span>( <span class="pl-smi">$_td</span>.<span class="pl-en">clone</span>() );
                    }
                    <span class="pl-k">for</span>(<span class="pl-k">var</span> j <span class="pl-k">=</span> <span class="pl-c1">0</span>; j <span class="pl-k">&lt;</span> <span class="pl-c1">10</span>; j<span class="pl-k">++</span>) {
                        <span class="pl-smi">$_table</span>.<span class="pl-en">append</span>( <span class="pl-smi">$_tr</span>.<span class="pl-en">clone</span>() );
                    }
                }

               <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.content<span class="pl-pds">'</span></span>).<span class="pl-en">fadeIn</span>(<span class="pl-c1">1000</span>);

               <span class="pl-k">function</span> <span class="pl-en">play_chess</span> () {
                   <span class="pl-smi">$_table</span>.<span class="pl-en">chess</span>();
                   <span class="pl-c1">window</span>.<span class="pl-en">setTimeout</span>(play_chess, <span class="pl-c1">2500</span>);
               }
               <span class="pl-en">play_chess</span>();
            }
        },

        <span class="pl-en">onLeave</span><span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">index</span>, <span class="pl-smi">nextIndex</span>, <span class="pl-smi">direction</span>) {
            <span class="pl-k">var</span> $_this <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-v">this</span>);

            <span class="pl-c">// reset the title and the header</span>
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.title<span class="pl-pds">'</span></span>).<span class="pl-en">hide</span>(<span class="pl-c1">400</span>);
            <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>header h4<span class="pl-pds">'</span></span>).<span class="pl-en">html</span>(<span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>);

            <span class="pl-k">if</span>(index <span class="pl-k">==</span> <span class="pl-c1">3</span>) {
                <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>div.lang &gt; div<span class="pl-pds">'</span></span>).<span class="pl-en">fadeOut</span>(<span class="pl-c1">600</span>);
            }

            <span class="pl-k">if</span>(index <span class="pl-k">==</span> <span class="pl-c1">4</span>) {
                <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>#canvas<span class="pl-pds">'</span></span>).<span class="pl-c1">next</span>().<span class="pl-en">addBack</span>().<span class="pl-en">fadeOut</span>();
            }

            <span class="pl-k">if</span>(index <span class="pl-k">==</span> <span class="pl-c1">5</span>) {
                <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.content<span class="pl-pds">'</span></span>).<span class="pl-en">fadeOut</span>();
            }

            <span class="pl-k">if</span>(index <span class="pl-k">==</span> <span class="pl-c1">6</span> <span class="pl-k">||</span> index <span class="pl-k">==</span> <span class="pl-c1">7</span>) {
                <span class="pl-smi">$_this</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>.content<span class="pl-pds">'</span></span>).<span class="pl-en">fadeOut</span>(<span class="pl-c1">300</span>);
            }
        }
    });
});

(<span class="pl-k">function</span> (<span class="pl-smi">$</span>) {
  <span class="pl-smi">$</span>.<span class="pl-smi">fn</span>.<span class="pl-en">typewriter</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">t</span>, <span class="pl-smi">d</span>, <span class="pl-smi">f</span>) {
    <span class="pl-k">if</span> (<span class="pl-smi">arguments</span>.<span class="pl-c1">length</span> <span class="pl-k">&lt;</span> <span class="pl-c1">3</span> <span class="pl-k">&amp;&amp;</span> <span class="pl-en">isNumber</span>(t)) {
      f <span class="pl-k">=</span> d;
      d <span class="pl-k">=</span> t;
      t <span class="pl-k">=</span> <span class="pl-c1">null</span>;
    }
    <span class="pl-v">this</span>.<span class="pl-en">each</span>(<span class="pl-k">function</span> () {
      <span class="pl-k">var</span> $<span class="pl-v">this</span> <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-v">this</span>);
      <span class="pl-k">var</span> text <span class="pl-k">=</span> t <span class="pl-k">||</span> <span class="pl-smi">$this</span>.<span class="pl-en">html</span>();
      <span class="pl-k">var</span> len <span class="pl-k">=</span> <span class="pl-smi">text</span>.<span class="pl-c1">length</span>;
      <span class="pl-k">var</span> i <span class="pl-k">=</span> <span class="pl-c1">0</span>;
      (<span class="pl-k">function</span> <span class="pl-en">input</span>() {
        <span class="pl-k">if</span> (<span class="pl-k">++</span>i <span class="pl-k">&gt;</span> len)
          <span class="pl-k">return</span> <span class="pl-en">isFunction</span>(f) <span class="pl-k">&amp;&amp;</span> <span class="pl-en">f</span>();

          <span class="pl-c1">setTimeout</span>(<span class="pl-k">function</span> () {
          <span class="pl-smi">$this</span>.<span class="pl-en">html</span>(<span class="pl-smi">text</span>.<span class="pl-c1">slice</span>(<span class="pl-c1">0</span>, i).<span class="pl-c1">replace</span>(<span class="pl-s"><span class="pl-pds">'</span><span class="pl-cce">\n</span><span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>&lt;br/&gt;<span class="pl-pds">'</span></span>));
          <span class="pl-en">input</span>();
        }, d);
      })();
    });
  };

  <span class="pl-k">function</span> <span class="pl-en">isString</span>(<span class="pl-smi">str</span>) {
    <span class="pl-k">return</span> <span class="pl-k">typeof</span> str <span class="pl-k">===</span> <span class="pl-s"><span class="pl-pds">'</span>string<span class="pl-pds">'</span></span> <span class="pl-k">||</span> str <span class="pl-k">instanceof</span> <span class="pl-c1">String</span>;
  }

  <span class="pl-k">function</span> <span class="pl-en">isNumber</span>(<span class="pl-smi">num</span>) {
    <span class="pl-k">return</span> <span class="pl-k">typeof</span> num <span class="pl-k">===</span> <span class="pl-s"><span class="pl-pds">'</span>number<span class="pl-pds">'</span></span>;
  }

  <span class="pl-k">function</span> <span class="pl-en">isFunction</span>(<span class="pl-smi">fn</span>) {
    <span class="pl-k">return</span> <span class="pl-k">typeof</span> fn <span class="pl-k">===</span> <span class="pl-s"><span class="pl-pds">'</span>function<span class="pl-pds">'</span></span>;
  }
})(jQuery);</pre>